<template>
  <header>
    <div class="search-return" @click="goBack">
      <van-icon name="arrow-left" size="28" />
    </div>
    <div class="search-main">
      <i><van-icon name="search" size="28" color="gray" /></i>
      <form action="" onsubmit="return false" @keyup.enter="goSearchList">
        <input
          type="text"
          placeholder="搜索你喜欢的产品..."
          v-model="searchValue"
        />
      </form>
    </div>

    <div class="search-btn" @click="goSearchList">搜索</div>
    <div class="kid3"></div>
  </header>
</template>

<script>
import { Toast } from "vant"
import { mapMutations, mapGetters, mapState, mapActions } from "vuex"

export default {
  data() {
    return {
      searchValue: "",
      searchArr: [],
    }
  },
  methods: {
    goBack() {
      this.$router.push("/home")
    },

    goSearchList() {
      // console.log(this.searchValue)
      // 处理空格问题
      let str = this.searchValue.replace(/\s*/g, "")
      if (!str) return
      let param = { value: str }
      this.$api.search.selectShop(param).then((res) => {
        console.log(res)
        // 将查询到的数据保存到vuex中
        this.searchShop(res.data)
        if (res.data.length === 0) {
          Toast("暂无该商品")
        }
      })
    },

    ...mapMutations([
      "loginOut",
      "userInit",
      "cartList",
      "checkAll",
      "checkItem",
      "searchShop",
    ]),
  },

  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
      list: (state) => state.cart.list,
      searchInfo: (state) => state.search.searchInfo,
    }),
  },
}
</script>

<style lang="less" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 44px /* 44/16 */;
  /* color: #fff; */
  background-color: #44aedb;
}

.search-return,
.search-btn {
  padding: 0 10px;
  color: #fff;
}
.search-main {
  display: flex;
  align-items: center;
  padding: 2px 20px;
  border-radius: 12px;
  background-color: #fff;
}

.search-btn {
  font-size: 16px;
}
</style>
